<template>
    <view class="myFollowing">
        <Navigation title="我的关注" background="#fff" />
        <view class="f ai-c fc-s-b ph-24 pv-32" v-for="(item, index) in list" :key="index">
            <view class="f ai-c mr-32 f1">
                <image :src="item.memberAvatar" class="w-100 h-100 b-100 mr-24"></image>
                <view class="f f1 fd-c">
                    <view class="f ai-c">
                        <view class="fs-32 fw-600 text-color4 name text-ellipsis-1">{{item.memberNickname}}</view>
                        <view class="f ai-c jc-c h-32 fs-22 text-color5 ml-12 create b-4 w-82">创作者</view>
                        <!-- <view class="f ai-c jc-c h-32 fs-22 text-color5 ml-12 official b-4 w-60">官方</view> -->
                    </view>
                    <view class="mt-8 f">
                        <view class="fs-24 text-color3 mr-24">
                            <text>点赞：</text>
                            <text class="text-color4">{{item.fen_likedCount||0}}</text>
                        </view>
                        <view class="fs-24 text-color3">
                            <text>粉丝：</text>
                            <text class="text-color4">{{item.fen_fansCount||0}}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="w-118 h-56 b-4 f ai-c jc-c fs-26 text-color2 btn follow" @click='cancel(item)'>取消关注</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh  } from '@dcloudio/uni-app';
import { dictDataType } from '@/services/api/dict';
import { useAuthStore } from '@/store/modules/auth';
import { followPage,contentUnfollow } from '@/services/api/novice';
import { myFenCount } from '@/services/api/mine/index';

const authStore = useAuthStore();
const list = ref<any[]>([]);
const curt = ref(0);
const statusList = ref([]);
const listParams = ref<any>({
    pageNo: 1,
    pageSize: 10,
});
onLoad(() => {
	
    getList();
});
async function getList() {
    const { data } = await followPage(listParams.value);
	data.list.forEach(async(item: any) => {
		if(item.memberUserId){
			let res = await myFenCount({ userId: item.memberUserId });
	
			item.fen_likedCount = res.data.likedCount;
			item.fen_fansCount = res.data.fansCount;
		}else{
			item.fen = {
				likedCount:0,
				fansCount:0,
			};
		}
	});
    list.value = list.value.concat(data.list);
}
async function cancel(item: any) {
	    await contentUnfollow({id:item.id, userId: authStore.getUserId });
	    uni.showToast({
	        title: '取消成功',
	        icon: 'none',
	    });
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
	}
	//下拉刷新
	onPullDownRefresh(() => {
	    list.value = [];
	    listParams.value.pageNo = 1;
	    getList();
	});
	//上拉加载
	onReachBottom(() => {
	    listParams.value.pageNo++;
	    getList();
	});
</script>
<style lang="scss" scoped>
.myFollowing {
    .btn {
        background: #f5f5f5;
    }
    .follow {
        background: #fabb3c;
        color: #fff;
    }
    .create {
        background: #4974f5;
    }
    .official {
        background: #fac519;
    }
    .name {
        max-width: 340rpx;
    }
}
</style>
